<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>未来视界 - 探索无限可能</title>
    <!-- 引入外部资源 -->
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    
    <!-- 配置Tailwind自定义主题 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#10B981',
                        accent: '#8B5CF6',
                        dark: '#1E293B',
                        light: '#F8FAFC'
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    
    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-shadow {
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            }
            .transition-smooth {
                transition: all 0.3s ease;
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .bg-gradient-custom {
                background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);
            }
            .card-hover {
                @apply transition-all duration-300 hover:shadow-xl hover:-translate-y-1;
            }
            .gradient-overlay {
                background: linear-gradient(to right, rgba(59, 130, 246, 0.9), rgba(139, 92, 246, 0.8));
            }
            .text-balance {
                text-wrap: balance;
            }
        }
    </style>
    
    <style>
        /* 基础动画 */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .animate-fade-in {
            animation: fadeIn 0.5s ease forwards;
        }
        
        /* 轮播动画 */
        @keyframes fadeInCarousel {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        /* 平滑滚动 */
        html {
            scroll-behavior: smooth;
        }
        
        /* 表单元素聚焦效果 */
        input:focus, textarea:focus, select:focus {
            outline: none;
            box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
        }
        
        /* 自定义开关样式 */
        .toggle-checkbox:checked {
            right: 0;
            border-color: #3B82F6;
        }
        
        .toggle-checkbox:checked + .toggle-label {
            background-color: #3B82F6;
        }
        
        /* 滚动条美化 */
        ::-webkit-scrollbar {
            width: 8px;
        }
        
        ::-webkit-scrollbar-track {
            background: #f1f5f9;
        }
        
        ::-webkit-scrollbar-thumb {
            background: #94a3b8;
            border-radius: 4px;
        }
        
        ::-webkit-scrollbar-thumb:hover {
            background: #64748b;
        }
        
        /* 页面容器样式 */
        #login-page, #future-vision-page, #personal-center-page {
            display: none;
            min-height: 100vh;
        }
        
        #login-page.active, #future-vision-page.active, #personal-center-page.active {
            display: block;
        }
        
        /* 提示弹窗样式 */
        .toast {
            position: fixed;
            top: 20px;
            right: 20px;
            background-color: #10B981;
            color: white;
            padding: 10px 20px;
            border-radius: 4px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            opacity: 0;
            transform: translateY(-20px);
            transition: all 0.3s ease;
            z-index: 9999;
        }
        
        .toast.show {
            opacity: 1;
            transform: translateY(0);
        }
    </style>
</head>

<body class="font-inter bg-gray-50 text-dark">
    <!-- 登录页面 -->
    <div id="login-page" class="active">
        <div class="w-full max-w-5xl relative mx-auto p-4">
            <!-- 背景装饰 -->
            <div class="absolute -top-20 -right-20 w-64 h-64 bg-primary/10 rounded-full blur-3xl"></div>
            <div class="absolute -bottom-32 -left-20 w-80 h-80 bg-accent/10 rounded-full blur-3xl"></div>
            
            <!-- 卡片容器 -->
            <div class="relative bg-white rounded-2xl overflow-hidden card-shadow">
                <div class="flex flex-col md:flex-row">
                    <!-- 左侧图片区域 -->
                    <div class="md:w-1/2 bg-gradient-custom p-8 md:p-12 text-white flex flex-col justify-between">
                        <div>
                            <h1 class="text-[clamp(1.8rem,5vw,2.5rem)] font-bold mb-4 text-shadow">欢迎回来</h1>
                            <p class="text-white/90 mb-8 max-w-md">
                                登录您的账户，开启全新的学习与教学体验。我们致力于提供最好的教育资源和平台服务。
                            </p>
                        </div>
                        
                        <!-- 装饰图形 -->
                        <div class="relative mt-12">
                            <div class="absolute -top-6 -left-6 w-24 h-24 border-4 border-white/20 rounded-lg transform rotate-12"></div>
                            <div class="absolute top-12 -right-8 w-32 h-32 border-4 border-white/20 rounded-full"></div>
                            <div class="absolute -bottom-4 left-1/3 w-16 h-16 border-4 border-white/20 rounded-lg transform -rotate-12"></div>
                        </div>
                    </div>
                    
                    <!-- 右侧表单区域 -->
                    <div class="md:w-1/2 p-8 md:p-12">
                        <!-- 表单标题 -->
                        <div class="mb-8 text-center">
                            <h2 id="form-title" class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-dark mb-2 transition-all duration-500 ease-in-out">登录账户</h2>
                            <p id="form-subtitle" class="text-gray-500 transition-all duration-500 ease-in-out">请输入您的账号信息</p>
                        </div>
                        
                        <!-- 登录表单 -->
                        <form id="login-form" class="space-y-5 transition-all duration-500 ease-in-out">
                            <div>
                                <label for="login-phone" class="block text-sm font-medium text-gray-700 mb-1">手机号</label>
                                <div class="relative">
                                    <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                                        <i class="fa fa-phone"></i>
                                    </span>
                                    <input type="tel" id="login-phone" class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:border-primary focus:ring-2 focus:ring-primary/20 focus:outline-none" placeholder="请输入手机号">
                                </div>
                            </div>
                            
                            <div>
                                <label for="login-password" class="block text-sm font-medium text-gray-700 mb-1">密码</label>
                                <div class="relative">
                                    <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                                        <i class="fa fa-lock"></i>
                                    </span>
                                    <input type="password" id="login-password" class="w-full pl-10 pr-10 py-2 border border-gray-300 rounded-lg focus:border-primary focus:ring-2 focus:ring-primary/20 focus:outline-none" placeholder="请输入密码">
                                    <button type="button" id="toggle-login-password" class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-500 hover:text-primary transition-all duration-500 ease-in-out">
                                        <i class="fa fa-eye-slash"></i>
                                    </button>
                                </div>
                            </div>
                            
                            <div class="flex justify-between items-center">
                                <div class="flex items-center">
                                    <input type="checkbox" id="remember-me" class="w-4 h-4 text-primary focus:ring-primary border-gray-300 rounded">
                                    <label for="remember-me" class="ml-2 block text-sm text-gray-700">记住我</label>
                                </div>
                                <button type="button" id="go-to-forgot" class="text-sm text-primary hover:text-primary/80 transition-all duration-500 ease-in-out">
                                    忘记密码?
                                </button>
                            </div>
                            
                            <button type="submit" class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-3 px-4 rounded-lg transition-all duration-500 ease-in-out transform hover:scale-[1.02] active:scale-[0.98]">
                                登录
                            </button>
                        </form>
                        
                        <!-- 注册表单 (默认隐藏) -->
                        <form id="register-form" class="space-y-5 transition-all duration-500 ease-in-out hidden">
                            <div>
                                <label for="register-phone" class="block text-sm font-medium text-gray-700 mb-1">手机号</label>
                                <div class="relative">
                                    <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                                        <i class="fa fa-phone"></i>
                                    </span>
                                    <input type="tel" id="register-phone" class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:border-primary focus:ring-2 focus:ring-primary/20 focus:outline-none" placeholder="请输入手机号">
                                </div>
                            </div>
                            
                            <div>
                                <label for="register-password" class="block text-sm font-medium text-gray-700 mb-1">密码</label>
                                <div class="relative">
                                    <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                                        <i class="fa fa-lock"></i>
                                    </span>
                                    <input type="password" id="register-password" class="w-full pl-10 pr-10 py-2 border border-gray-300 rounded-lg focus:border-primary focus:ring-2 focus:ring-primary/20 focus:outline-none" placeholder="请设置密码">
                                    <button type="button" id="toggle-register-password" class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-500 hover:text-primary transition-all duration-500 ease-in-out">
                                        <i class="fa fa-eye-slash"></i>
                                    </button>
                                </div>
                            </div>
                            
                            <div>
                                <label for="register-code" class="block text-sm font-medium text-gray-700 mb-1">验证码</label>
                                <div class="flex space-x-2">
                                    <div class="relative flex-1">
                                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                                            <i class="fa fa-code"></i>
                                        </span>
                                        <input type="text" id="register-code" class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:border-primary focus:ring-2 focus:ring-primary/20 focus:outline-none" placeholder="请输入验证码">
                                    </div>
                                    <button type="button" class="whitespace-nowrap px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg transition-all duration-500 ease-in-out">
                                        获取验证码
                                    </button>
                                </div>
                            </div>
                            
                            <button type="submit" class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-3 px-4 rounded-lg transition-all duration-500 ease-in-out transform hover:scale-[1.02] active:scale-[0.98]">
                                注册
                            </button>
                        </form>
                        
                        <!-- 找回密码表单 (默认隐藏) -->
                        <form id="forgot-form" class="space-y-5 transition-all duration-500 ease-in-out hidden">
                            <div>
                                <label for="forgot-phone" class="block text-sm font-medium text-gray-700 mb-1">手机号</label>
                                <div class="relative">
                                    <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                                        <i class="fa fa-phone"></i>
                                    </span>
                                    <input type="tel" id="forgot-phone" class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:border-primary focus:ring-2 focus:ring-primary/20 focus:outline-none" placeholder="请输入注册的手机号">
                                </div>
                            </div>
                            
                            <div>
                                <label for="forgot-code" class="block text-sm font-medium text-gray-700 mb-1">验证码</label>
                                <div class="flex space-x-2">
                                    <div class="relative flex-1">
                                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                                            <i class="fa fa-code"></i>
                                        </span>
                                        <input type="text" id="forgot-code" class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:border-primary focus:ring-2 focus:ring-primary/20 focus:outline-none" placeholder="请输入验证码">
                                    </div>
                                    <button type="button" class="whitespace-nowrap px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg transition-all duration-500 ease-in-out">
                                        获取验证码
                                    </button>
                                </div>
                            </div>
                            
                            <button type="submit" class="w-full bg-accent hover:bg-accent/90 text-white font-medium py-3 px-4 rounded-lg transition-all duration-500 ease-in-out transform hover:scale-[1.02] active:scale-[0.98]">
                                获取验证码
                            </button>
                        </form>
                        
                        <!-- 切换链接 -->
                        <div class="mt-8 text-center">
                            <p id="toggle-text" class="text-gray-600">
                                还没有账号? 
                                <button type="button" id="go-to-register" class="text-primary font-medium hover:text-primary/80 transition-all duration-500 ease-in-out">
                                    立即注册
                                </button>
                            </p>
                            <p id="back-to-login-text" class="text-gray-600 hidden">
                                已有账号? 
                                <button type="button" id="back-to-login" class="text-primary font-medium hover:text-primary/80 transition-all duration-500 ease-in-out">
                                    返回登录
                                </button>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 页脚 -->
            <div class="mt-8 text-center text-gray-500 text-sm">
                <p>© 2023 教育平台. 保留所有权利.</p>
            </div>
        </div>
    </div>

    <!-- 未来视界页面 -->
    <div id="future-vision-page">
        <!-- 导航栏 -->
        <header id="navbar" class="fixed top-0 left-0 w-full z-50 transition-all duration-300 py-4">
            <div class="container mx-auto px-4 md:px-6">
                <div class="flex justify-between items-center">
                    <!-- Logo -->
                    <a href="#" class="flex items-center space-x-2">
                        <div class="w-10 h-10 rounded-lg gradient-overlay flex items-center justify-center">
                            <i class="fa fa-eye text-white text-xl"></i>
                        </div>
                        <span class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-primary to-accent">未来视界</span>
                    </a>

                    <!-- 桌面导航 -->
                    <nav class="hidden md:flex items-center space-x-8">
                        <a href="#home" class="font-medium py-2 hover:text-primary transition-colors">首页</a>
                        <a href="#about" class="font-medium py-2 hover:text-primary transition-colors">关于我们</a>
                        <a href="#services" class="font-medium py-2 hover:text-primary transition-colors">服务</a>
                        <a href="#projects" class="font-medium py-2 hover:text-primary transition-colors">项目案例</a>
                        <a href="#insights" class="font-medium py-2 hover:text-primary transition-colors">洞察</a>
                        <a href="#personal-center-link" id="personal-center-link" class="font-medium py-2 hover:text-primary transition-colors">个人中心</a>
                        <a href="#contact" class="bg-primary hover:bg-primary/90 text-white px-5 py-2 rounded-lg transition-colors text-center">
                            联系我们
                        </a>
                    </nav>
                </div>
            </div>
        </header>

        <main>
            <!-- 英雄区域带轮播 -->
            <section id="home" class="relative h-screen overflow-hidden">
                <!-- 轮播容器 -->
                <div id="carousel" class="h-full">
                    <!-- 轮播项1 -->
                    <div class="carousel-item absolute inset-0 opacity-100 transition-opacity duration-1000">
                        <div class="absolute inset-0 bg-dark/50 z-10"></div>
                        <img src="https://picsum.photos/id/10/1920/1080" alt="未来科技" class="w-full h-full object-cover">
                        <div class="absolute inset-0 z-20 flex items-center">
                            <div class="container mx-auto px-4 md:px-6">
                                <div class="max-w-2xl animate-fade-in">
                                    <span class="inline-block px-4 py-1 bg-primary text-white text-sm font-medium rounded-full mb-6">引领行业创新</span>
                                    <h1 class="text-[clamp(2.5rem,6vw,4rem)] font-bold text-white leading-tight mb-6">
                                        塑造未来的<br>数字体验
                                    </h1>
                                    <p class="text-white/90 text-lg md:text-xl mb-8 max-w-xl">
                                        深入了解您的业务需求，提供个性化解决方案，帮助您在竞争激烈的市场中脱颖而出。
                                    </p>
                                    <div class="flex flex-col sm:flex-row gap-4">
                                        <a href="#projects" class="bg-white text-primary px-8 py-3 rounded-lg hover:bg-opacity-90 transition-all text-center font-medium">
                                            查看案例
                                        </a>
                                        <a href="#contact" class="bg-transparent border-2 border-white text-white px-8 py-3 rounded-lg hover:bg-white/10 transition-all text-center font-medium">
                                            开始合作
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 轮播项2 -->
                    <div class="carousel-item absolute inset-0 opacity-0 transition-opacity duration-1000">
                        <div class="absolute inset-0 bg-dark/50 z-10"></div>
                        <img src="https://picsum.photos/id/20/1920/1080" alt="数据分析" class="w-full h-full object-cover">
                        <div class="absolute inset-0 z-20 flex items-center">
                            <div class="container mx-auto px-4 md:px-6">
                                <div class="max-w-2xl animate-fade-in">
                                    <span class="inline-block px-4 py-1 bg-accent text-white text-sm font-medium rounded-full mb-6">数据驱动决策</span>
                                    <h1 class="text-[clamp(2.5rem,6vw,4rem)] font-bold text-white leading-tight mb-6">
                                        用数据洞察<br>引领商业未来
                                    </h1>
                                    <p class="text-white/90 text-lg md:text-xl mb-8 max-w-xl">
                                        深入了解您的业务需求，提供个性化解决方案，帮助您在竞争激烈的市场中脱颖而出。
                                    </p>
                                    <div class="flex flex-col sm:flex-row gap-4">
                                        <a href="#projects" class="bg-white text-primary px-8 py-3 rounded-lg hover:bg-opacity-90 transition-all text-center font-medium">
                                            查看案例
                                        </a>
                                        <a href="#contact" class="bg-transparent border-2 border-white text-white px-8 py-3 rounded-lg hover:bg-white/10 transition-all text-center font-medium">
                                            开始合作
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 轮播项3 -->
                    <div class="carousel-item absolute inset-0 opacity-0 transition-opacity duration-1000">
                        <div class="absolute inset-0 bg-dark/50 z-10"></div>
                        <img src="https://picsum.photos/id/30/1920/1080" alt="技术创新" class="w-full h-full object-cover">
                        <div class="absolute inset-0 z-20 flex items-center">
                            <div class="container mx-auto px-4 md:px-6">
                                <div class="max-w-2xl animate-fade-in">
                                    <span class="inline-block px-4 py-1 bg-accent text-white text-sm font-medium rounded-full mb-6">技术与创意融合</span>
                                    <h1 class="text-[clamp(2.5rem,6vw,4rem)] font-bold text-white leading-tight mb-6">
                                        创新不止于<br>技术本身
                                    </h1>
                                    <p class="text-white/90 text-lg md:text-xl mb-8 max-w-xl">
                                        我们将前沿技术与创新设计相结合，打造令人惊艳的数字产品和用户体验。
                                    </p>
                                    <div class="flex flex-col sm:flex-row gap-4">
                                        <a href="#projects" class="bg-white text-primary px-8 py-3 rounded-lg hover:bg-opacity-90 transition-all text-center font-medium">
                                            查看案例
                                        </a>
                                        <a href="#contact" class="bg-transparent border-2 border-white text-white px-8 py-3 rounded-lg hover:bg-white/10 transition-all text-center font-medium">
                                            开始合作
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <!-- 关于我们 -->
            <section id="about" class="py-20 bg-white">
                <div class="container mx-auto px-4 md:px-6">
                    <div class="text-center max-w-3xl mx-auto mb-16">
                        <span class="inline-block px-4 py-1 bg-primary/10 text-primary text-sm font-medium rounded-full mb-4">关于我们</span>
                        <h2 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold mb-6">引领数字创新的先行者</h2>
                        <p class="text-gray-600">
                            未来视界成立于2008年，是一家专注于数字创新的科技公司。我们的团队由来自不同领域的专业人才组成，包括设计师、开发者、 strategists和分析师。
                        </p>
                        <p class="text-gray-600 mb-8">
                            十五年来，我们为超过500家企业提供了优质的数字解决方案，帮助他们实现业务增长和数字化转型。我们相信技术的力量，更相信创新能够改变世界。
                        </p>

                        <!-- 核心价值 -->
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
                            <div class="flex items-start">
                                <div class="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center mr-4 mt-1 flex-shrink-0">
                                    <i class="fa fa-lightbulb-o text-primary"></i>
                                </div>
                                <div>
                                    <h3 class="font-bold mb-2">创新思维</h3>
                                    <p class="text-gray-600 text-sm">不断探索新的思路和方法，为客户提供创新解决方案。</p>
                                </div>
                            </div>

                            <div class="flex items-start">
                                <div class="w-10 h-10 rounded-lg bg-secondary/10 flex items-center justify-center mr-4 mt-1 flex-shrink-0">
                                    <i class="fa fa-users text-secondary"></i>
                                </div>
                                <div>
                                    <h3 class="font-bold mb-2">客户至上</h3>
                                    <p class="text-gray-600 text-sm">深入理解客户需求，提供超出期望的产品和服务。</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <!-- 项目案例 -->
            <section id="projects" class="py-20 bg-light">
                <div class="container mx-auto px-4 md:px-6">
                    <div class="text-center max-w-3xl mx-auto mb-16">
                        <span class="inline-block px-4 py-1 bg-primary/10 text-primary text-sm font-medium rounded-full mb-4">成功案例</span>
                        <h2 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold mb-6">我们的精选项目</h2>
                        <p class="text-gray-600 mb-8">
                            探索我们为各行业客户打造的创新解决方案，每一个项目都体现了我们对卓越品质的追求
                        </p>

                        <!-- 案例筛选 -->
                        <div class="flex flex-wrap justify-center gap-3 mb-12">
                            <button class="px-5 py-2 rounded-lg bg-primary text-white filter-btn active" data-filter="all">全部案例</button>
                            <button class="px-5 py-2 rounded-lg bg-gray-200 hover:bg-gray-300 transition-colors filter-btn" data-filter="software">软件开发</button>
                            <button class="px-5 py-2 rounded-lg bg-gray-200 hover:bg-gray-300 transition-colors filter-btn" data-filter="design">设计作品</button>
                            <button class="px-5 py-2 rounded-lg bg-gray-200 hover:bg-gray-300 transition-colors filter-btn" data-filter="data">数据分析</button>
                        </div>
                    </div>

                    <!-- 案例列表 -->
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                        <!-- 案例1 -->
                        <div class="project-item group" data-category="software">
                            <div class="relative overflow-hidden rounded-xl">
                                <img src="https://picsum.photos/id/40/600/400" alt="企业管理系统" class="w-full h-64 object-cover transition-transform duration-500 group-hover:scale-110">
                                <div class="absolute inset-0 bg-gradient-to-t from-dark/80 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col justify-end p-6">
                                    <h3 class="text-white text-xl font-bold">制造业管理系统</h3>
                                    <p class="text-white/80 text-sm mt-2">为制造业客户开发的全流程管理系统，提升运营效率30%</p>
                                    <a href="#" class="mt-4 inline-block text-white border-b border-white/50 hover:border-white transition-colors">查看详情</a>
                                </div>
                            </div>
                        </div>

                        <!-- 案例2 -->
                        <div class="project-item group" data-category="design">
                            <div class="relative overflow-hidden rounded-xl">
                                <img src="https://picsum.photos/id/60/600/400" alt="移动应用设计" class="w-full h-64 object-cover transition-transform duration-500 group-hover:scale-110">
                                <div class="absolute inset-0 bg-gradient-to-t from-dark/80 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col justify-end p-6">
                                    <h3 class="text-white text-xl font-bold">健康管理APP设计</h3>
                                    <p class="text-white/80 text-sm mt-2">为医疗健康企业设计的用户友好型移动应用，下载量超100万</p>
                                    <a href="#" class="mt-4 inline-block text-white border-b border-white/50 hover:border-white transition-colors">查看详情</a>
                                </div>
                            </div>
                        </div>

                        <!-- 案例3 -->
                        <div class="project-item group" data-category="data">
                            <div class="relative overflow-hidden rounded-xl">
                                <img src="https://picsum.photos/id/70/600/400" alt="数据分析平台" class="w-full h-64 object-cover transition-transform duration-500 group-hover:scale-110">
                                <div class="absolute inset-0 bg-gradient-to-t from-dark/80 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col justify-end p-6">
                                    <h3 class="text-white text-xl font-bold">零售数据分析平台</h3>
                                    <p class="text-white/80 text-sm mt-2">为连锁零售企业打造的数据分析平台，提升销售额15%</p>
                                    <a href="#" class="mt-4 inline-block text-white border-b border-white/50 hover:border-white transition-colors">查看详情</a>
                                </div>
                            </div>
                        </div>

                        <!-- 案例4 -->
                        <div class="project-item group" data-category="software">
                            <div class="relative overflow-hidden rounded-xl">
                                <img src="https://picsum.photos/id/80/600/400" alt="金融科技平台" class="w-full h-64 object-cover transition-transform duration-500 group-hover:scale-110">
                                <div class="absolute inset-0 bg-gradient-to-t from-dark/80 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col justify-end p-6">
                                    <h3 class="text-white text-xl font-bold">智能投顾系统</h3>
                                    <p class="text-white/80 text-sm mt-2">为金融机构开发的AI驱动投顾系统，管理资产超10亿元</p>
                                    <a href="#" class="mt-4 inline-block text-white border-b border-white/50 hover:border-white transition-colors">查看详情</a>
                                </div>
                            </div>
                        </div>

                        <!-- 案例5 -->
                        <div class="project-item group" data-category="software">
                            <div class="relative overflow-hidden rounded-xl">
                                <img src="https://picsum.photos/id/90/600/400" alt="电商平台" class="w-full h-64 object-cover transition-transform duration-500 group-hover:scale-110">
                                <div class="absolute inset-0 bg-gradient-to-t from-dark/80 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col justify-end p-6">
                                    <h3 class="text-white text-xl font-bold">全渠道电商平台</h3>
                                    <p class="text-white/80 text-sm mt-2">为时尚品牌打造的全渠道销售平台，整合线上线下业务</p>
                                    <a href="#" class="mt-4 inline-block text-white border-b border-white/50 hover:border-white transition-colors">查看详情</a>
                                </div>
                            </div>
                        </div>

                        <!-- 案例6 -->
                        <div class="project-item group" data-category="design">
                            <div class="relative overflow-hidden rounded-xl">
                                <img src="https://picsum.photos/id/100/600/400" alt="网站重设计" class="w-full h-64 object-cover transition-transform duration-500 group-hover:scale-110">
                                <div class="absolute inset-0 bg-gradient-to-t from-dark/80 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col justify-end p-6">
                                    <h3 class="text-white text-xl font-bold">教育平台重设计</h3>
                                    <p class="text-white/80 text-sm mt-2">为在线教育机构进行的品牌和界面重设计，用户留存提升25%</p>
                                    <a href="#" class="mt-4 inline-block text-white border-b border-white/50 hover:border-white transition-colors">查看详情</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <!-- 客户评价 -->
            <section id="testimonials" class="py-20 bg-white">
                <div class="container mx-auto px-4 md:px-6">
                    <div class="text-center max-w-3xl mx-auto mb-16">
                        <span class="inline-block px-4 py-1 bg-primary/10 text-primary text-sm font-medium rounded-full mb-4">客户评价</span>
                        <h2 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold mb-6">客户对我们的评价</h2>
                        <p class="text-gray-600">
                            听听我们的客户怎么说，他们的成功是我们最大的动力
                        </p>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                        <!-- 评价1 -->
                        <div class="bg-white p-8 rounded-xl shadow-sm card-hover">
                            <div class="text-yellow-400 mb-6">
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                            </div>
                            <p class="text-gray-600 mb-6 italic">
                                "未来视界团队为我们打造的管理系统彻底改变了我们的运营方式，效率提升了40%以上。他们不仅技术过硬，更能深入理解我们的业务需求。"
                            </p>
                            <div class="flex items-center">
                                <img src="https://picsum.photos/id/1012/100/100" alt="客户头像" class="w-12 h-12 rounded-full mr-4">
                                <div>
                                    <h4 class="font-bold">李总</h4>
                                    <p class="text-gray-500 text-sm">某制造企业 CEO</p>
                                </div>
                            </div>
                        </div>

                        <!-- 评价2 -->
                        <div class="bg-white p-8 rounded-xl shadow-sm card-hover">
                            <div class="text-yellow-400 mb-6">
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                            </div>
                            <p class="text-gray-600 mb-6 italic">
                                "与未来视界合作是我们做过的最明智的决定之一。他们设计的数据分析平台帮助我们发现了许多之前被忽视的业务机会，带来了可观的收入增长。"
                            </p>
                            <div class="flex items-center">
                                <img src="https://picsum.photos/id/1027/100/100" alt="客户头像" class="w-12 h-12 rounded-full mr-4">
                                <div>
                                    <h4 class="font-bold">王经理</h4>
                                    <p class="text-gray-500 text-sm">某零售连锁 市场总监</p>
                                </div>
                            </div>
                        </div>

                        <!-- 评价3 -->
                        <div class="bg-white p-8 rounded-xl shadow-sm card-hover">
                            <div class="text-yellow-400 mb-6">
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star-half-o"></i>
                            </div>
                            <p class="text-gray-600 mb-6 italic">
                                "未来视界设计的移动应用获得了用户的广泛好评，下载量远超预期。他们的设计团队非常注重用户体验，每一个细节都考虑得很周到。"
                            </p>
                            <div class="flex items-center">
                                <img src="https://picsum.photos/id/1025/100/100" alt="客户头像" class="w-12 h-12 rounded-full mr-4">
                                <div>
                                    <h4 class="font-bold">赵总</h4>
                                    <p class="text-gray-500 text-sm">某科技创业公司 创始人</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

                <!-- CTA区域 -->
                <section class="py-20 gradient-overlay text-white">
                    <div class="container mx-auto px-4 md:px-6 text-center">
                        <h2 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold mb-6">准备好开始您的数字化之旅了吗？</h2>
                        <p class="text-white/80 text-lg max-w-2xl mx-auto mb-10">
                            无论您是需要全新的解决方案，还是想优化现有系统，我们都能为您提供专业支持
                        </p>
                        <a href="#contact" class="inline-block bg-white text-primary px-8 py-3 rounded-lg hover:bg-opacity-90 transition-all text-center font-medium">
                            联系我们
                        </a>
                    </div>
                </section>

                <!-- 联系我们 -->
                <section id="contact" class="py-20 bg-light">
                    <div class="container mx-auto px-4 md:px-6">
                        <div class="text-center max-w-3xl mx-auto mb-16">
                            <span class="inline-block px-4 py-1 bg-primary/10 text-primary text-sm font-medium rounded-full mb-4">联系我们</span>
                            <h2 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold mb-6">让我们一起创造未来</h2>
                            <p class="text-gray-600">
                                无论您有任何疑问或需求，我们的团队都将随时为您提供帮助和支持
                            </p>
                        </div>

                        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
                            <div>
                                <div class="bg-white p-8 rounded-xl shadow-sm h-full">
                                    <h3 class="text-2xl font-bold mb-6">发送消息</h3>
                                    <form id="contact-form" class="space-y-6">
                                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                            <div>
                                                <label for="name" class="block text-sm font-medium text-gray-700 mb-1">姓名</label>
                                                <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:border-primary focus:ring-2 focus:ring-primary/20 focus:outline-none" placeholder="您的姓名">
                                            </div>
                                            <div>
                                                <label for="email" class="block text-sm font-medium text-gray-700 mb-1">邮箱</label>
                                                <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:border-primary focus:ring-2 focus:ring-primary/20 focus:outline-none" placeholder="您的邮箱地址">
                                            </div>
                                        </div>
                                        
                                        <div>
                                            <label for="subject" class="block text-sm font-medium text-gray-700 mb-1">主题</label>
                                            <input type="text" id="subject" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:border-primary focus:ring-2 focus:ring-primary/20 focus:outline-none" placeholder="消息主题">
                                        </div>
                                        
                                        <div>
                                            <label for="message" class="block text-sm font-medium text-gray-700 mb-1">消息内容</label>
                                            <textarea id="message" rows="5" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:border-primary focus:ring-2 focus:ring-primary/20 focus:outline-none" placeholder="请详细描述您的需求或问题"></textarea>
                                        </div>

                                        <button type="submit" class="bg-primary hover:bg-primary/90 text-white px-8 py-3 rounded-lg transition-all font-medium">
                                            发送消息
                                        </button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            </main>

            <!-- 页脚 -->
            <footer class="bg-dark text-white pt-16 pb-8">
                <div class="container mx-auto px-4 md:px-6">
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10 mb-16">
                        <div>
                            <a href="#" class="flex items-center space-x-2 mb-6">
                                <div class="w-10 h-10 rounded-lg gradient-overlay flex items-center justify-center">
                                    <i class="fa fa-eye text-white text-xl"></i>
                                </div>
                                <span class="text-xl font-bold text-white">未来视界</span>
                            </a>
                            <p class="text-gray-400 mb-6">
                                我们致力于为企业提供创新的数字解决方案，助力企业数字化转型和可持续发展。
                            </p>
                            <div class="flex space-x-4">
                                <a href="#" class="text-gray-400 hover:text-white transition-colors">
                                    <i class="fa fa-weixin"></i>
                                </a>
                                <a href="#" class="text-gray-400 hover:text-white transition-colors">
                                    <i class="fa fa-weibo"></i>
                                </a>
                                <a href="#" class="text-gray-400 hover:text-white transition-colors">
                                    <i class="fa fa-linkedin"></i>
                                </a>
                                <a href="#" class="text-gray-400 hover:text-white transition-colors">
                                    <i class="fa fa-github"></i>
                                </a>
                            </div>
                        </div>

                        <div>
                            <h4 class="text-lg font-bold mb-6">快速链接</h4>
                            <ul class="space-y-3">
                                <li><a href="#home" class="text-gray-400 hover:text-white transition-colors">首页</a></li>
                                <li><a href="#about" class="text-gray-400 hover:text-white transition-colors">关于我们</a></li>
                                <li><a href="#services" class="text-gray-400 hover:text-white transition-colors">服务</a></li>
                                <li><a href="#projects" class="text-gray-400 hover:text-white transition-colors">项目案例</a></li>
                                <li><a href="#insights" class="text-gray-400 hover:text-white transition-colors">行业洞察</a></li>
                                <li><a href="#contact" class="text-gray-400 hover:text-white transition-colors">联系我们</a></li>
                            </ul>
                        </div>

                        <div>
                            <h4 class="text-lg font-bold mb-6">服务</h4>
                            <ul class="space-y-3">
                                <li><a href="#" class="text-gray-400 hover:text-white transition-colors">软件开发</a></li>
                                <li><a href="#" class="text-gray-400 hover:text-white transition-colors">UI/UX设计</a></li>
                                <li><a href="#" class="text-gray-400 hover:text-white transition-colors">数据分析</a></li>
                                <li><a href="#" class="text-gray-400 hover:text-white transition-colors">云计算服务</a></li>
                                <li><a href="#" class="text-gray-400 hover:text-white transition-colors">网络安全</a></li>
                                <li><a href="#" class="text-gray-400 hover:text-white transition-colors">数字化转型咨询</a></li>
                            </ul>
                        </div>

                        <div>
                            <h4 class="text-lg font-bold mb-6">订阅资讯</h4>
                            <p class="text-gray-400 mb-4">订阅我们的资讯，获取最新的行业动态和技术见解</p>
                            <form class="mb-4">
                                <div class="flex">
                                    <input type="email" placeholder="您的邮箱地址" class="px-4 py-2 rounded-l-lg w-full focus:outline-none text-dark">
                                    <button type="submit" class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-r-lg transition-colors">
                                        <i class="fa fa-paper-plane"></i>
                                    </button>
                                </div>
                            </form>
                            <p class="text-gray-500 text-sm">我们尊重您的隐私，不会向第三方分享您的信息</p>
                        </div>
                    </div>

                    <div class="border-t border-gray-800 pt-8">
                        <div class="flex flex-col md:flex-row justify-between items-center">
                            <div class="flex flex-col md:flex-row justify-between items-center">
                                <p class="text-gray-500 text-sm mb-4 md:mb-0">© 2023 未来视界科技有限公司. 保留所有权利.</p>
                                <div class="flex flex-wrap justify-center gap-x-6 gap-y-2">
                                    <a href="#" class="text-gray-500 hover:text-white text-sm transition-colors">隐私政策</a>
                                    <a href="#" class="text-gray-500 hover:text-white text-sm transition-colors">服务条款</a>
                                    <a href="#" class="text-gray-500 hover:text-white text-sm transition-colors">Cookie政策</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </footer>
        </div>

        <!-- 个人中心页面 -->
        <div id="personal-center-page">
            <!-- 顶部导航栏 -->
            <header class="bg-white shadow-sm sticky top-0 z-50">
                <div class="container mx-auto px-4 md:px-6">
                    <div class="flex justify-between items-center py-4">
                        <!-- Logo和标题 -->
                        <div class="flex items-center space-x-3">
                            <div class="w-10 h-10 rounded-lg bg-primary flex items-center justify-center">
                                <i class="fa fa-user-circle text-white text-xl"></i>
                            </div>
                            <h1 class="text-xl font-bold text-dark">个人中心</h1>
                        </div>
                        
                        <!-- 返回首页按钮 -->
                        <button id="back-to-home" class="flex items-center text-gray-700 hover:text-primary transition-smooth">
                            <i class="fa fa-home mr-2"></i>
                            <span>返回首页</span>
                        </button>
                        
                        <!-- 用户菜单 -->
                        <div class="relative">
                            <button id="userMenuBtn" class="flex items-center space-x-2 focus:outline-none">
                                <img src="https://picsum.photos/id/64/200/200" alt="用户头像" class="w-8 h-8 rounded-full object-cover">
                                <span>张明</span>
                                <i class="fa fa-angle-down text-gray-500"></i>
                            </button>
                            <div id="userMenu" class="hidden absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg py-1 z-10">
                                <a href="#basic-info" class="block px-4 py-2 text-gray-700 hover:bg-gray-100 transition-smooth">
                                    <i class="fa fa-user-o mr-2"></i>个人资料
                                </a>
                                <a href="#password" class="block px-4 py-2 text-gray-700 hover:bg-gray-100 transition-smooth">
                                    <i class="fa fa-lock mr-2"></i>密码修改
                                </a>
                                <a href="#privacy" class="block px-4 py-2 text-gray-700 hover:bg-gray-100 transition-smooth">
                                    <i class="fa fa-cog mr-2"></i>账户设置
                                </a>
                                <div class="border-t border-gray-100 my-1"></div>
                                <a href="#" id="logout-btn" class="block px-4 py-2 text-red-600 hover:bg-gray-100 transition-smooth">
                                    <i class="fa fa-sign-out mr-2"></i>退出登录
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </header>

            <main class="container mx-auto px-4 md:px-6 py-8">
                <div class="flex flex-col lg:flex-row gap-8">
                    <!-- 左侧导航菜单 -->
                    <aside class="lg:w-1/5">
                        <div class="bg-white rounded-xl p-5 card-shadow sticky top-24">
                            <nav class="space-y-1">
                                <a href="#basic-info" class="flex items-center px-4 py-3 rounded-lg bg-primary/10 text-primary font-medium">
                                    <i class="fa fa-id-card-o w-5 text-center mr-3"></i>
                                    <span>基本信息</span>
                                </a>
                                <a href="#password" class="flex items-center px-4 py-3 rounded-lg text-gray-700 hover:bg-gray-100 transition-smooth">
                                    <i class="fa fa-lock w-5 text-center mr-3"></i>
                                    <span>密码修改</span>
                                </a>
                                <a href="#resume" class="flex items-center px-4 py-3 rounded-lg text-gray-700 hover:bg-gray-100 transition-smooth">
                                    <i class="fa fa-file-text-o w-5 text-center mr-3"></i>
                                    <span>个人简历</span>
                                </a>
                                <a href="#teacher-info" class="flex items-center px-4 py-3 rounded-lg text-gray-700 hover:bg-gray-100 transition-smooth">
                                    <i class="fa fa-briefcase w-5 text-center mr-3"></i>
                                    <span>教师信息</span>
                                </a>
                                <a href="#privacy" class="flex items-center px-4 py-3 rounded-lg text-gray-700 hover:bg-gray-100 transition-smooth">
                                    <i class="fa fa-shield w-5 text-center mr-3"></i>
                                    <span>隐私设置</span>
                                </a>
                            </nav>
                        </div>
                    </aside>
                    
                    <!-- 右侧内容区域 -->
                    <div class="lg:w-4/5 space-y-8">
                        <!-- 基本信息部分 -->
                        <section id="basic-info" class="bg-white rounded-xl p-6 md:p-8 card-shadow animate-fade-in">
                            <div class="flex flex-col md:flex-row md:items-center justify-between mb-8">
                                <div>
                                    <h2 class="text-2xl font-bold">基本信息</h2>
                                    <p class="text-gray-500 mt-1">管理您的个人资料和账户信息</p>
                                </div>
                                <div class="flex space-x-3 mt-4 md:mt-0">
                                    <button id="editBasicInfoBtn" class="px-5 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-smooth flex items-center">
                                        <i class="fa fa-pencil mr-2"></i> 编辑信息
                                    </button>
                                    <button id="cancelEditBtn" class="px-5 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-smooth hidden">
                                        取消
                                    </button>
                                    <button id="saveBasicInfoBtn" class="px-5 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-smooth hidden">
                                        保存信息
                                    </button>
                                </div>
                            </div>
                            
                            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                                <!-- 头像上传区域 -->
                                <div class="md:col-span-1 flex flex-col items-center">
                                    <div class="relative">
                                        <img id="avatarPreview" src="https://picsum.photos/id/64/200/200" alt="用户头像" class="w-40 h-40 rounded-full object-cover border-4 border-gray-100">
                                        <div id="avatarEditBtn" class="hidden absolute bottom-0 right-0 w-10 h-10 bg-primary rounded-full flex items-center justify-center text-white cursor-pointer hover:bg-primary/90 transition-smooth">
                                            <i class="fa fa-camera"></i>
                                        </div>
                                        <input type="file" id="avatarUpload" accept="image/*" class="hidden">
                                    </div>
                                    <p class="text-sm text-gray-500 text-center">支持JPG、PNG格式，建议尺寸400×400px</p>
                                </div>
                                
                                <!-- 个人信息表单 -->
                                <div class="md:col-span-2 space-y-6">
                                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                        <div>
                                            <label class="block text-sm font-medium text-gray-700 mb-1">姓名</label>
                                            <input type="text" id="fullname" value="张明" class="w-full px-4 py-2 border border-gray-300 rounded-lg" disabled>
                                            <p class="text-xs text-gray-500 mt-1">姓名可以修改</p>
                                        </div>
                                        
                                        <div>
                                            <label class="block text-sm font-medium text-gray-700 mb-1">性别</label>
                                            <div class="flex items-center space-x-4">
                                                <label class="inline-flex items-center">
                                                    <input type="radio" name="gender" value="male" checked disabled>
                                                    <span class="ml-2">男</span>
                                                </label>
                                                <label class="inline-flex items-center">
                                                    <input type="radio" name="gender" value="female" disabled>
                                                    <span class="ml-2">女</span>
                                                </label>
                                            </div>
                                        </div>
                                        
                                        <div>
                                            <label class="block text-sm font-medium text-gray-700 mb-1">手机号码</label>
                                            <input type="tel" value="138****6789" class="w-full px-4 py-2 border border-gray-300 rounded-lg bg-gray-50" disabled>
                                            <p class="text-xs text-gray-500 mt-1">手机号码用于登录和找回密码</p>
                                        </div>
                                        
                                        <div>
                                            <label class="block text-sm font-medium text-gray-700 mb-1">邮箱</label>
                                            <input type="email" value="zhang***@example.com" class="w-full px-4 py-2 border border-gray-300 rounded-lg bg-gray-50" disabled>
                                        </div>
                                        
                                        <div class="md:col-span-2">
                                            <label class="block text-sm font-medium text-gray-700 mb-1">个人简介</label>
                                            <textarea rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg" disabled>我是一名教育工作者，热爱教学和研究，致力于培养优秀人才。</textarea>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </section>
                        
                        <!-- 个人简历部分 -->
                        <section id="resume" class="bg-white rounded-xl p-6 md:p-8 card-shadow animate-fade-in" style="animation-delay: 0.2s;">
                            <div class="flex flex-col md:flex-row md:items-center justify-between mb-8">
                                <div>
                                    <h2 class="text-2xl font-bold">个人简历</h2>
                                    <p class="text-gray-500 mt-1">上传或更新您的个人简历（PDF格式）</p>
                                </div>
                                <label for="resumeUpload" class="mt-4 md:mt-0 px-5 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-smooth cursor-pointer flex items-center">
                                    <i class="fa fa-upload mr-2"></i> 上传简历
                                </label>
                                <input type="file" id="resumeUpload" accept=".pdf" class="hidden">
                            </div>
                            
                            <!-- 当前简历 -->
                            <div class="border border-gray-200 rounded-lg p-5 bg-gray-50 flex items-center">
                                <div class="w-12 h-16 bg-red-100 rounded flex items-center justify-center mr-4 flex-shrink-0">
                                    <i class="fa fa-file-pdf-o text-red-500 text-2xl"></i>
                                </div>
                                <div class="flex-1 min-w-0">
                                    <h3 class="font-medium truncate">个人简历_张明.pdf</h3>
                                    <p class="text-sm text-gray-500 mt-0.5">更新于 2023-06-15 · 文件大小: 1.2MB</p>
                                </div>
                                <div class="flex space-x-3 ml-4">
                                    <a href="#" class="text-primary hover:text-primary/80 transition-smooth">
                                        <i class="fa fa-download mr-1"></i> 下载
                                    </a>
                                    <button id="deleteResumeBtn" class="text-red-500 hover:text-red-600 transition-smooth">
                                        <i class="fa fa-trash mr-1"></i> 删除
                                    </button>
                                </div>
                            </div>
                            
                            <!-- 上传提示 -->
                            <div class="mt-4 text-sm text-gray-500">
                                <p><i class="fa fa-info-circle text-primary mr-1"></i> 支持上传PDF格式文件，最大不超过5MB</p>
                            </div>
                        </section>
                        
                        <!-- 教师信息部分 -->
                        <section id="teacher-info" class="bg-white rounded-xl p-6 md:p-8 card-shadow animate-fade-in" style="animation-delay: 0.3s;">
                            <div class="flex flex-col md:flex-row md:items-center justify-between mb-8">
                                <div>
                                    <h2 class="text-2xl font-bold">教师信息</h2>
                                    <p class="text-gray-500 mt-1">编辑您的职称、研究方向和授课领域</p>
                                    <span class="inline-block mt-2 px-2.5 py-0.5 text-xs font-medium bg-accent/10 text-accent rounded-full">教师专属</span>
                                </div>
                                <button id="editTeacherInfoBtn" class="mt-4 md:mt-0 text-primary hover:text-primary/80 font-medium flex items-center transition-smooth">
                                    <i class="fa fa-pencil mr-2"></i> 编辑信息
                                </button>
                            </div>
                            
                            <div class="space-y-6">
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">职称</label>
                                        <input type="text" value="副教授" class="w-full px-4 py-2 border border-gray-300 rounded-lg" disabled>
                                    </div>
                                    
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">所属院系</label>
                                        <input type="text" value="计算机科学与技术学院" class="w-full px-4 py-2 border border-gray-300 rounded-lg" disabled>
                                    </div>
                                    
                                    <div class="md:col-span-2">
                                        <label class="block text-sm font-medium text-gray-700 mb-1">研究方向</label>
                                        <input type="text" value="人工智能、机器学习、数据挖掘" class="w-full px-4 py-2 border border-gray-300 rounded-lg" disabled>
                                    </div>
                                    
                                    <div class="md:col-span-2">
                                        <label class="block text-sm font-medium text-gray-700 mb-1">主要授课课程</label>
                                        <textarea rows="3" class="w-full px-4 py-2 border border-gray-300 rounded-lg" disabled>
数据结构与算法、人工智能导论、机器学习、深度学习、模式识别
                                        </textarea>
                                    </div>
                                    
                                    <div class="md:col-span-2">
                                        <label class="block text-sm font-medium text-gray-700 mb-1">科研项目</label>
                                        <textarea rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg" disabled>
1. 国家自然科学基金项目：基于深度学习的图像识别与理解研究（主持）
2. 省级科技攻关项目：智能教育平台关键技术研究与应用（参与）
3. 企业横向项目：大数据分析平台研发（主持）
                                        </textarea>
                                    </div>
                                </div>
                            </div>
                        </section>
                        
                        <!-- 密码修改部分 -->
                        <section id="password" class="bg-white rounded-xl p-6 md:p-8 card-shadow animate-fade-in" style="animation-delay: 0.1s;">
                            <div class="mb-8">
                                <h2 class="text-2xl font-bold">密码修改</h2>
                                <p class="text-gray-500 mt-1">为了您的账户安全，请定期修改密码</p>
                            </div>
                            
                            <form id="passwordForm" class="max-w-lg">
                                <div class="space-y-6">
                                    <div>
                                        <label for="currentPassword" class="block text-sm font-medium text-gray-700 mb-1">原密码</label>
                                        <div class="relative">
                                            <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                                                <i class="fa fa-lock"></i>
                                            </span>
                                            <input type="password" id="currentPassword" class="w-full pl-10 px-4 py-2 border border-gray-300 rounded-lg">
                                        </div>
                                    </div>
                                    
                                    <div>
                                        <label for="newPassword" class="block text-sm font-medium text-gray-700 mb-1">新密码</label>
                                        <div class="relative">
                                            <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                                                <i class="fa fa-key"></i>
                                            </span>
                                            <input type="password" id="newPassword" class="w-full pl-10 px-4 py-2 border border-gray-300 rounded-lg">
                                        </div>
                                        <p class="text-xs text-gray-500 mt-1">密码长度至少8位，包含字母和数字</p>
                                    </div>
                                    
                                    <div>
                                        <label for="confirmPassword" class="block text-sm font-medium text-gray-700 mb-1">确认新密码</label>
                                        <div class="relative">
                                            <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                                                <i class="fa fa-key"></i>
                                            </span>
                                            <input type="password" id="confirmPassword" class="w-full pl-10 px-4 py-2 border border-gray-300 rounded-lg">
                                        </div>
                                    </div>
                                    
                                    <div>
                                        <label for="emailCode" class="block text-sm font-medium text-gray-700 mb-1">邮箱验证码</label>
                                        <div class="flex space-x-3">
                                            <div class="relative flex-1">
                                                <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                                                    <i class="fa fa-envelope"></i>
                                                </span>
                                                <input type="text" id="emailCode" class="w-full pl-10 px-4 py-2 border border-gray-300 rounded-lg">
                                            </div>
                                            <button type="button" id="sendCodeBtn" class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-smooth whitespace-nowrap">
                                                获取验证码
                                            </button>
                                        </div>
                                    </div>
                                    
                                    <div class="pt-4">
                                        <button type="submit" class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-3 px-4 rounded-lg transition-smooth">
                                            确认修改
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </section>
                        
                        <!-- 隐私设置部分 -->
                        <section id="privacy" class="bg-white rounded-xl p-6 md:p-8 card-shadow animate-fade-in" style="animation-delay: 0.4s;">
                            <div class="mb-8">
                                <h2 class="text-2xl font-bold">隐私设置</h2>
                                <p class="text-gray-500 mt-1">控制您的个人信息展示范围</p>
                            </div>
                            
                            <div class="space-y-6">
                                <div class="flex items-center justify-between p-4 border border-gray-200 rounded-lg">
                                    <div>
                                        <p class="font-medium">个人资料可见性</p>
                                        <p class="text-sm text-gray-500 mt-0.5">控制谁可以查看您的基本资料信息</p>
                                    </div>
                                    <select class="px-3 py-1.5 border border-gray-300 rounded-lg text-sm">
                                        <option selected>所有人可见</option>
                                        <option>仅校内可见</option>
                                        <option>仅好友可见</option>
                                    </select>
                                </div>
                                
                                <div class="flex items-center justify-between p-4 border border-gray-200 rounded-lg">
                                    <div>
                                        <p class="font-medium">课程信息</p>
                                        <p class="text-sm text-gray-500 mt-0.5">您教授的课程信息</p>
                                    </div>
                                    <select class="px-3 py-1.5 border border-gray-300 rounded-lg text-sm">
                                        <option selected>所有人可见</option>
                                        <option>仅校内可见</option>
                                        <option>仅学生可见</option>
                                    </select>
                                </div>
                                
                                <div class="flex items-center justify-between p-4 border border-gray-200 rounded-lg">
                                    <div>
                                        <p class="font-medium">研究成果</p>
                                        <p class="text-sm text-gray-500 mt-0.5">您的论文、项目等科研成果</p>
                                    </div>
                                    <select class="px-3 py-1.5 border border-gray-300 rounded-lg text-sm">
                                        <option selected>所有人可见</option>
                                        <option>仅校内可见</option>
                                        <option>仅好友可见</option>
                                    </select>
                                </div>
                                
                                <div class="flex items-center justify-between p-4 border border-gray-200 rounded-lg">
                                    <div>
                                        <p class="font-medium">头像</p>
                                        <p class="text-sm text-gray-500 mt-0.5">您的个人头像</p>
                                    </div>
                                    <select class="px-3 py-1.5 border border-gray-300 rounded-lg text-sm">
                                        <option selected>所有人可见</option>
                                        <option>仅校内可见</option>
                                        <option>仅好友可见</option>
                                    </select>
                                </div>
                                
                                <div class="flex items-center justify-between p-4 border border-gray-200 rounded-lg">
                                    <div>
                                        <p class="font-medium">所属院系</p>
                                        <p class="text-sm text-gray-500 mt-0.5">您所在的院系信息</p>
                                    </div>
                                    <select class="px-3 py-1.5 border border-gray-300 rounded-lg text-sm">
                                        <option selected>所有人可见</option>
                                        <option>仅校内可见</option>
                                    </select>
                                </div>
                                
                                <div class="mt-8 flex justify-end">
                                    <button id="savePrivacySettingsBtn" class="px-6 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-smooth">
                                        保存设置
                                    </button>
                                </div>
                            </div>
                        </section>
                    </div>
                </div>
            </main>
            
            <!-- 页脚 -->
            <footer class="bg-white border-t border-gray-200 mt-12">
                <div class="container mx-auto px-4 md:px-6 py-8">
                    <div class="flex flex-col md:flex-row justify-between items-center">
                        <p class="text-gray-500 text-sm">© 2023 学校信息管理系统. 保留所有权利.</p>
                        <div class="flex space-x-6 mt-4 md:mt-0">
                            <a href="#" class="text-gray-500 hover:text-primary text-sm transition-smooth">使用帮助</a>
                            <a href="#" class="text-gray-500 hover:text-primary text-sm transition-smooth">隐私政策</a>
                            <a href="#" class="text-gray-500 hover:text-primary text-sm transition-smooth">联系我们</a>
                        </div>
                    </div>
                </div>
            </footer>
        </div>

        <!-- 提示弹窗 -->
        <div id="toast" class="toast"></div>

        <script>
            // 页面切换功能
            const loginPage = document.getElementById('login-page');
            const futureVisionPage = document.getElementById('future-vision-page');
            const personalCenterPage = document.getElementById('personal-center-page');
            const personalCenterLink = document.getElementById('personal-center-link');
            const backToHomeBtn = document.getElementById('back-to-home');
            const logoutBtn = document.getElementById('logout-btn');
            
            // 登录表单处理
            const loginForm = document.getElementById('login-form');
            const registerForm = document.getElementById('register-form');
            const forgotForm = document.getElementById('forgot-form');
            const formTitle = document.getElementById('form-title');
            const formSubtitle = document.getElementById('form-subtitle');
            const toggleText = document.getElementById('toggle-text');
            const backToLoginText = document.getElementById('back-to-login-text');
            
            // 切换按钮
            const goToRegisterBtn = document.getElementById('go-to-register');
            const goToForgotBtn = document.getElementById('go-to-forgot');
            const backToLoginBtn = document.getElementById('back-to-login');
            
            // 密码显示切换按钮
            const toggleLoginPassword = document.getElementById('toggle-login-password');
            const toggleRegisterPassword = document.getElementById('toggle-register-password');
            const loginPassword = document.getElementById('login-password');
            const registerPassword = document.getElementById('register-password');
            
            // 页面切换函数
            function showPage(pageId) {
                loginPage.classList.remove('active');
                futureVisionPage.classList.remove('active');
                personalCenterPage.classList.remove('active');
                
                document.getElementById(pageId).classList.add('active');
            }
            
            // 登录成功后显示未来视界页面
            loginForm.addEventListener('submit', (e) => {
                e.preventDefault();
                showToast('登录成功');
                setTimeout(() => {
                    showPage('future-vision-page');
                }, 1000);
            });
            
            // 注册表单提交
            registerForm.addEventListener('submit', (e) => {
                e.preventDefault();
                showToast('注册成功，请登录');
                setTimeout(() => {
                    backToLoginBtn.click();
                }, 1000);
            });
            
            // 找回密码表单提交
            forgotForm.addEventListener('submit', (e) => {
                e.preventDefault();
                showToast('验证码已发送');
            });
            
            // 切换到注册表单
            goToRegisterBtn.addEventListener('click', () => {
                // 添加淡出效果
                loginForm.classList.add('opacity-0', 'translate-x-4');
                forgotForm.classList.add('opacity-0', 'translate-x-4');
                
                setTimeout(() => {
                    // 隐藏登录和找回密码表单
                    loginForm.classList.add('hidden');
                    forgotForm.classList.add('hidden');
                    
                    // 显示注册表单
                    registerForm.classList.remove('hidden');
                    
                    // 更新标题和说明
                    formTitle.textContent = '创建账户';
                    formSubtitle.textContent = '请填写信息完成注册';
                    
                    // 更新切换文本
                    toggleText.classList.add('hidden');
                    backToLoginText.classList.remove('hidden');
                    
                    // 添加淡入效果
                    setTimeout(() => {
                        registerForm.classList.remove('opacity-0', 'translate-x-4');
                    }, 50);
                }, 300);
            });
            
            // 切换到找回密码表单
            goToForgotBtn.addEventListener('click', () => {
                // 添加淡出效果
                loginForm.classList.add('opacity-0', 'translate-x-4');
                registerForm.classList.add('opacity-0', 'translate-x-4');
                
                setTimeout(() => {
                    // 隐藏登录和注册表单
                    loginForm.classList.add('hidden');
                    registerForm.classList.add('hidden');
                    
                    // 显示找回密码表单
                    forgotForm.classList.remove('hidden');
                    
                    // 更新标题和说明
                    formTitle.textContent = '找回密码';
                    formSubtitle.textContent = '请输入注册的手机号和邮箱';
                    
                    // 更新切换文本
                    toggleText.classList.add('hidden');
                    backToLoginText.classList.remove('hidden');
                    
                    // 添加淡入效果
                    setTimeout(() => {
                        forgotForm.classList.remove('opacity-0', 'translate-x-4');
                    }, 50);
                }, 300);
            });
            
            // 返回登录表单
            backToLoginBtn.addEventListener('click', () => {
                // 添加淡出效果
                registerForm.classList.add('opacity-0', 'translate-x-4');
                forgotForm.classList.add('opacity-0', 'translate-x-4');
                
                setTimeout(() => {
                    // 隐藏注册和找回密码表单
                    registerForm.classList.add('hidden');
                    forgotForm.classList.add('hidden');
                    
                    // 显示登录表单
                    loginForm.classList.remove('hidden');
                    
                    // 更新标题和说明
                    formTitle.textContent = '登录账户';
                    formSubtitle.textContent = '请输入您的账号信息';
                    
                    // 更新切换文本
                    backToLoginText.classList.add('hidden');
                    toggleText.classList.remove('hidden');
                    
                    // 添加淡入效果
                    setTimeout(() => {
                        loginForm.classList.remove('opacity-0', 'translate-x-4');
                    }, 50);
                }, 300);
            });
            
            // 切换登录密码显示状态
            toggleLoginPassword.addEventListener('click', () => {
                const type = loginPassword.getAttribute('type') === 'password' ? 'text' : 'password';
                loginPassword.setAttribute('type', type);
                
                // 切换图标
                toggleLoginPassword.querySelector('i').classList.toggle('fa-eye');
                toggleLoginPassword.querySelector('i').classList.toggle('fa-eye-slash');
            });
            
            // 切换注册密码显示状态
            toggleRegisterPassword.addEventListener('click', () => {
                const type = registerPassword.getAttribute('type') === 'password' ? 'text' : 'password';
                registerPassword.setAttribute('type', type);
                
                // 切换图标
                toggleRegisterPassword.querySelector('i').classList.toggle('fa-eye');
                toggleRegisterPassword.querySelector('i').classList.toggle('fa-eye-slash');
            });
            
            // 个人中心页面切换
            personalCenterLink.addEventListener('click', (e) => {
                e.preventDefault();
                showPage('personal-center-page');
            });
            
            // 返回首页
            backToHomeBtn.addEventListener('click', () => {
                showPage('future-vision-page');
            });
            
            // 退出登录
            logoutBtn.addEventListener('click', () => {
                if (confirm('确定要退出登录吗？')) {
                    showToast('已退出登录');
                    setTimeout(() => {
                        showPage('login-page');
                    }, 1000);
                }
            });
            
            // 轮播功能
            let currentSlide = 0;
            const slides = document.querySelectorAll('.carousel-item');
            const totalSlides = slides.length;
            
            function showSlide(index) {
                // 隐藏所有幻灯片
                slides.forEach(slide => {
                    slide.style.opacity = '0';
                    slide.style.pointerEvents = 'none';
                });
                
                // 显示当前幻灯片
                slides[index].style.opacity = '1';
                slides[index].style.pointerEvents = 'auto';
            }
            
            function nextSlide() {
                currentSlide = (currentSlide + 1) % totalSlides;
                showSlide(currentSlide);
            }
            
            // 初始化轮播
            showSlide(currentSlide);
            
            // 每5秒切换一次幻灯片
            setInterval(nextSlide, 5000);
            
            // 案例筛选功能
            const filterButtons = document.querySelectorAll('.filter-btn');
            const projectItems = document.querySelectorAll('.project-item');
            
            filterButtons.forEach(button => {
                button.addEventListener('click', function() {
                    // 更新按钮状态
                    filterButtons.forEach(btn => {
                        btn.classList.remove('active', 'bg-primary', 'text-white');
                        btn.classList.add('bg-gray-200');
                    });
                    this.classList.add('active', 'bg-primary', 'text-white');
                    this.classList.remove('bg-gray-200');
                    
                    const filter = this.getAttribute('data-filter');
                    
                    // 筛选项目
                    projectItems.forEach(item => {
                        if (filter === 'all' || item.getAttribute('data-category') === filter) {
                            item.style.display = 'block';
                        } else {
                            item.style.display = 'none';
                        }
                    });
                });
            });
            
            // 联系表单提交处理
            const contactForm = document.getElementById('contact-form');
            if (contactForm) {
                contactForm.addEventListener('submit', function(e) {
                    e.preventDefault();
                    showToast('感谢您的留言，我们会尽快与您联系！');
                    contactForm.reset();
                });
            }
            
            // 个人中心 - 基本信息编辑功能
            const editBasicInfoBtn = document.getElementById('editBasicInfoBtn');
            const cancelEditBtn = document.getElementById('cancelEditBtn');
            const saveBasicInfoBtn = document.getElementById('saveBasicInfoBtn');
            const avatarEditBtn = document.getElementById('avatarEditBtn');
            const avatarUpload = document.getElementById('avatarUpload');
            const avatarPreview = document.getElementById('avatarPreview');
            
            // 获取所有可编辑的输入字段
            const editableFields = document.querySelectorAll('#basic-info input:not([disabled="disabled"]), #basic-info textarea');
            
            // 编辑按钮点击事件
            editBasicInfoBtn.addEventListener('click', function() {
                // 切换到编辑模式
                editableFields.forEach(field => {
                    field.removeAttribute('disabled');
                });
                
                // 显示编辑头像按钮
                avatarEditBtn.classList.remove('hidden');
                
                // 切换按钮显示状态
                editBasicInfoBtn.classList.add('hidden');
                cancelEditBtn.classList.remove('hidden');
                saveBasicInfoBtn.classList.remove('hidden');
            });
            
            // 取消编辑按钮点击事件
            cancelEditBtn.addEventListener('click', function() {
                // 切换到查看模式
                editableFields.forEach(field => {
                    field.setAttribute('disabled', 'disabled');
                });
                
                // 隐藏编辑头像按钮
                avatarEditBtn.classList.add('hidden');
                
                // 切换按钮显示状态
                editBasicInfoBtn.classList.remove('hidden');
                cancelEditBtn.classList.add('hidden');
                saveBasicInfoBtn.classList.add('hidden');
            });
            
            // 保存基本信息按钮点击事件
            saveBasicInfoBtn.addEventListener('click', function() {
                // 更新顶部导航栏显示的姓名
                const newName = document.getElementById('fullname').value.trim();
                if (newName) {
                    document.querySelector('#userMenuBtn span').textContent = newName;
                }
                
                // 模拟保存操作
                showToast('基本信息保存成功');
                
                // 切换到查看模式
                cancelEditBtn.click();
            });
            
            // 头像上传功能
            avatarEditBtn.addEventListener('click', function() {
                avatarUpload.click();
            });
            
            avatarUpload.addEventListener('change', function(e) {
                if (e.target.files && e.target.files[0]) {
                    const reader = new FileReader();
                    
                    reader.onload = function(e) {
                        avatarPreview.src = e.target.result;
                        // 更新顶部导航栏的头像
                        document.querySelector('#userMenuBtn img').src = e.target.result;
                        showToast('头像上传成功');
                    }
                    
                    reader.readAsDataURL(e.target.files[0]);
                }
            });
            
            // 教师信息编辑功能
            const editTeacherInfoBtn = document.getElementById('editTeacherInfoBtn');
            const teacherInfoFields = document.querySelectorAll('#teacher-info input, #teacher-info textarea');
            
            editTeacherInfoBtn.addEventListener('click', function() {
                const isEditing = teacherInfoFields[0].hasAttribute('disabled');
                
                if (isEditing) {
                    // 切换到编辑模式
                    teacherInfoFields.forEach(field => {
                        field.removeAttribute('disabled');
                    });
                    editTeacherInfoBtn.innerHTML = '<i class="fa fa-save mr-2"></i> 保存信息';
                    showToast('进入编辑模式');
                } else {
                    // 保存信息
                    teacherInfoFields.forEach(field => {
                        field.setAttribute('disabled', 'disabled');
                    });
                    editTeacherInfoBtn.innerHTML = '<i class="fa fa-pencil mr-2"></i> 编辑信息';
                    showToast('教师信息保存成功');
                }
            });
            
            // 简历上传功能
            const resumeUpload = document.getElementById('resumeUpload');
            const deleteResumeBtn = document.getElementById('deleteResumeBtn');
            
            resumeUpload.addEventListener('change', function(e) {
                if (e.target.files && e.target.files[0]) {
                    const file = e.target.files[0];
                    
                    // 验证文件类型
                    if (file.type !== 'application/pdf') {
                        showToast('请上传PDF格式的文件', 'error');
                        return;
                    }
                    
                    // 验证文件大小
                    if (file.size > 5 * 1024 * 1024) {
                        showToast('文件大小不能超过5MB', 'error');
                        return;
                    }
                    
                    showToast('简历上传成功');
                    // 这里可以添加实际上传逻辑
                }
            });
            
            deleteResumeBtn.addEventListener('click', function() {
                if (confirm('确定要删除当前简历吗？此操作不可恢复。')) {
                    showToast('简历已删除');
                    // 这里可以添加实际删除逻辑
                }
            });
            
            // 密码修改表单提交
            const passwordForm = document.getElementById('passwordForm');
            
            passwordForm.addEventListener('submit', function(e) {
                e.preventDefault();
                
                const currentPassword = document.getElementById('currentPassword').value;
                const newPassword = document.getElementById('newPassword').value;
                const confirmPassword = document.getElementById('confirmPassword').value;
                const emailCode = document.getElementById('emailCode').value;
                
                // 简单验证
                if (!currentPassword) {
                    showToast('请输入原密码', 'error');
                    return;
                }
                
                if (newPassword.length < 8) {
                    showToast('新密码长度至少8位', 'error');
                    return;
                }
                
                if (newPassword !== confirmPassword) {
                    showToast('两次输入的新密码不一致', 'error');
                    return;
                }
                
                if (!emailCode) {
                    showToast('请输入邮箱验证码', 'error');
                    return;
                }
                
                showToast('密码修改成功，请重新登录');
                passwordForm.reset();
                
                // 2秒后跳转到登录页面
                setTimeout(() => {
                    showPage('login-page');
                }, 2000);
            });
            
            // 发送验证码按钮
            const sendCodeBtn = document.getElementById('sendCodeBtn');
            let countdown = 0;
            
            sendCodeBtn.addEventListener('click', function() {
                if (countdown > 0) return;
                
                // 模拟发送验证码
                showToast('验证码已发送到您的邮箱');
                
                // 倒计时60秒
                countdown = 60;
                sendCodeBtn.disabled = true;
                sendCodeBtn.textContent = `${countdown}秒后重新发送`;
                
                const timer = setInterval(() => {
                    countdown--;
                    sendCodeBtn.textContent = `${countdown}秒后重新发送`;
                    
                    if (countdown <= 0) {
                        clearInterval(timer);
                        sendCodeBtn.disabled = false;
                        sendCodeBtn.textContent = '获取验证码';
                    }
                }, 1000);
            });
            
            // 保存隐私设置
            const savePrivacySettingsBtn = document.getElementById('savePrivacySettingsBtn');
            
            savePrivacySettingsBtn.addEventListener('click', function() {
                showToast('隐私设置保存成功');
            });
            
            // 用户菜单切换
            const userMenuBtn = document.getElementById('userMenuBtn');
            const userMenu = document.getElementById('userMenu');
            
            userMenuBtn.addEventListener('click', function() {
                userMenu.classList.toggle('hidden');
            });
            
            // 点击其他区域关闭用户菜单
            document.addEventListener('click', function(e) {
                if (!userMenuBtn.contains(e.target) && !userMenu.contains(e.target)) {
                    userMenu.classList.add('hidden');
                }
            });
            
            // 提示弹窗功能
            function showToast(message, type = 'success') {
                const toast = document.getElementById('toast');
                toast.textContent = message;
                
                // 设置不同类型的提示样式
                if (type === 'error') {
                    toast.style.backgroundColor = '#EF4444';
                } else {
                    toast.style.backgroundColor = '#10B981';
                }
                
                toast.classList.add('show');
                
                // 3秒后隐藏提示
                setTimeout(() => {
                    toast.classList.remove('show');
                }, 3000);
            }
            
            // 导航栏滚动效果
            window.addEventListener('scroll', function() {
                const navbar = document.getElementById('navbar');
                if (window.scrollY > 50) {
                    navbar.classList.add('nav-scrolled');
                } else {
                    navbar.classList.remove('nav-scrolled');
                }
            });
            
            // 页面加载完成后的初始化
            window.addEventListener('load', function() {
                // 确保初始状态正确
                showPage('login-page');
            });
        </script>
    </body>
</html>
